<template>
	<div class="front_notice_detail" v-loading="loading">
		<h1>{{ detailData.title }}</h1>
		<div class="tips">
			<span class="el-icon-user">作者：{{ detailData.createName }}</span>
			<span class="el-icon-date">时间：{{ detailData.releaseTime }}</span>
			<span class="el-icon-view">浏览：{{ detailData.browseCount }}</span>
		</div>
		<div class="body" v-html="detailData.content"></div>
	</div>
</template>

<script>
import lodash from 'lodash';
import { journalismDetail } from '@/api/system/tbSysJournalism';
const formatRouteTitle = (to, from, next) => {
	let name = to.query?.name;
	let detail = lodash.last(to.matched);
	detail.meta.title = name || '公告详情';
	next();
};
export default {
	beforeRouteEnter: formatRouteTitle,
	beforeRouteUpdate: formatRouteTitle,
	data() {
		return {
			loading: false,
			detailData: {}
		};
	},
	computed: {
		noticeId() {
			return this.$route.params.id;
		}
	},
	watch: {
		noticeId: {
			handler(id) {
				this.getNoticeDetail(id);
			},
			immediate: true
		}
	},
	methods: {
		async getNoticeDetail(id) {
			let params = { id, isRecord: 1 };
			let result = await journalismDetail(params).then((res) => res.data);
			if (result.code === '0') {
				this.detailData = this.$detailData(result.data);
				console.log(this.detailData);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.front_notice_detail {
	padding: max(0, 1.5%);
	h1 {
		font-size: 24px;
		line-height: 2;
		font-weight: normal;
		text-align: center;
	}
	.tips {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		border-bottom: solid 1px #ebeef5;
		padding: 10px 0;
		color: #909399;
		span {
			line-height: 24px;
			white-space: nowrap;
		}
		span::before {
			margin-right: 6px;
		}
	}
	.body {
		font-size: 16px;
		color: #606266;
		padding: 16px;
		line-height: 2;
		text-align: justify;
	}
}
</style>
